<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="userRegister"
    title="用户授权"
    width="424"
    @ok="confirmSubmit"
    @close="resetDrawer"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="user-auth">
      <div class="auth-title">{{ drawerInfo.record.orgName || '--' }}</div>
      <div class="auth-item">
        <div class="item-label">姓名</div>
        <div class="item-value">{{ drawerInfo.record.userName || '--' }}</div>
      </div>
      <div class="auth-item">
        <div class="item-label">手机号码</div>
        <div class="item-value">{{ drawerInfo.record.phoneNumber || '--' }}</div>
      </div>
      <div class="auth-item">
        <div class="item-label">所属企业</div>
        <div class="item-value">{{ drawerInfo.record.orgName || '--' }}</div>
      </div>
      <div class="auth-item">
        <div class="item-label">联系邮箱</div>
        <div class="item-value">{{ drawerInfo.record.email || '--' }}</div>
      </div>
      <div class="auth-item">
        <div class="item-label">授权时间</div>
        <div class="item-value">
          <a-range-picker
            v-model:value="drawerInfo.time"
            valueFormat="YYYY-MM-DD"
            :ranges="ranges"
            :disabled-date="disabledDate"
          />
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { cloneDeep } from 'lodash-es'
import { message } from 'ant-design-vue'
import dayjs, { Dayjs } from 'dayjs'
type RangeValue = [Dayjs, Dayjs]
import api from '@/api'

const emit = defineEmits(['operateSuccess', 'register'])

const { enterpriseUserAuth } = api

// 选择当天之后时间
const disabledDate = (current: Dayjs) => {
  return current && current < dayjs().startOf('day')
}

const ranges = {
  试用1天: [dayjs(), dayjs().add(1, 'day')] as RangeValue,
  试用30天: [dayjs(), dayjs().add(30, 'day')] as RangeValue,
  正式365天: [dayjs(), dayjs().add(365, 'day')] as RangeValue
}

const drawerInfo = reactive<any>({
  record: {},
  time: []
})

const [userRegister, { closeDrawer, changeOkLoading }] = useDrawerInner((data) => {
  drawerInfo.record = cloneDeep(data.record) || {}
  if (drawerInfo.record.authBeginDate && drawerInfo.record.authEndDate) {
    drawerInfo.time = [drawerInfo.record.authBeginDate, drawerInfo.record.authEndDate]
  }
})

const resetDrawer = () => {
  drawerInfo.time = []
  changeOkLoading(false)
}

const confirmSubmit = async () => {
  if (!drawerInfo.time || drawerInfo.time.length === 0) {
    return message.error('请选择授权时间')
  }
  let currentDate = dayjs().format('YYYY-MM-DD')
  if (drawerInfo.time && drawerInfo.time.length === 2) {
    if (drawerInfo.time[0] != currentDate && drawerInfo.time[0] != drawerInfo.record.authBeginDate) {
      return message.error('授权起始时间必须为当天')
    }
  }

  try {
    changeOkLoading(true)
    let reqData: any = {
      userId: drawerInfo.record.userId
    }
    if (drawerInfo.time && drawerInfo.time.length === 2) {
      reqData.authBeginDate = dayjs(drawerInfo.time[0]).format('YYYY-MM-DD')
      reqData.authEndDate = dayjs(drawerInfo.time[1]).format('YYYY-MM-DD')
    }
    await enterpriseUserAuth(reqData)
    closeDrawer()
    resetDrawer()
    message.success('用户授权成功')
    emit('operateSuccess')
  } catch (error) {
    changeOkLoading(false)
  }
}
</script>
<style lang="less" scoped>
.user-auth {
  padding: 8px;
  position: relative;
  .auth-title {
    padding-left: 12px;
    padding-bottom: 8px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 600;
    color: @text-color;
    line-height: 22px;
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background: @primary-color;
      border-radius: 2px;
      position: absolute;
      left: 0;
      top: 2px;
    }
  }
  .auth-item {
    padding: 0 36px;
    margin-bottom: 24px;
    .item-label {
      color: #192236;
      font-size: 12px;
    }
    .item-value {
      margin-top: 6px;
      color: #1a2033;
      font-size: 14px;
    }
  }
}
</style>
